<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="css/register.css">
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div class="register-container">
        <h1>用户注册</h1>
        <form method="post" enctype="multipart/form-data" id="registerForme">
            <!-- 头像上传区域 -->
            <div class="avatar-group">
                <label for="avatar" class="avatar-label">头像上传</label>
                <div class="avatar-preview" id="avatarPreview">
                    <img src="" alt="预览图" id="previewImage" style="display: none;">
                </div>
                <div class="avatar-hint-container">
                    <p class="hint-text">支持jpg、jpeg、png、gif格式，文件大小不超过2MB</p>
                </div>
                <div class="file-upload-container">
                    <div class="file-upload">
                        <span class="upload-btn">选择头像</span>
                        <input type="file" id="avatar" name="avatar" accept="image/*">
                        <input type="hidden" name="picture" id="picture">
                    </div>
                </div>
            </div>
            <!--头像上传区域结束-->
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" value="">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" value="">
                <p class="hint-text">密码至少8位，且必须包含字母和数字</p>
            </div>
            <div class="form-group">
                <label for="confirm_password">确认密码</label>
                <input type="password" id="confirm_password" >
            </div>
            <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="tel" id="phone" name="phone" value="">
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="email" value="">
            </div>
            <button type="button" id="register">注册</button>
        </form>
    </div>
    <script>
        $(function(){
            //文件上传
            $("#avatar").on("change",function(e){
                const file = e.target.files[0];
                if(file){
                    const maxSize = 2 * 1024 * 1024; // 2MB
                    if(file.size > maxSize){
                        alert("头像文件大小不能超过2MB");
                        e.target.value = "";
                        return;
                    }else{
                        const reader  = new FileReader();
                        reader.onload = function(event){
                            $("#previewImage").attr("src",event.target.result);
                            $("#previewImage").show();
                        }
                        reader.readAsDataURL(file);
                        var formData = new FormData($('#registerForme').get(0));
                        console.log(formData);
                        //ajax上传文件
                        $.ajax({
                            url:"controller/upload_avatar.php",
                            type:"POST",
                            data:formData,
                            contentType:false,
                            processData:false,
                            success:function(res){
                                res = JSON.parse(res);
                                alert(res.msg)
                                if(res.code){
                                    $("#picture").val(res.data);
                                }
                            }
                        });
                    }
                }else{
                    $("#previewImage").hide();
                }
            })
            //提交注册
            $("#register").on("click",function(){
                var data = {}
                $("#registerForme").serializeArray().forEach(function(item){
                    data[item.name] = item.value;
                })
                //验证用户提交的信息
                if(data.username == ""){
                    alert("请输入用户名")
                    $("#username").focus();
                    return false;
                }
                //验证密码
                if(data.password == "") {
                    alert("请输入密码")
                    $("#password").focus();
                    return false;
                }
                //验证密码是否符合要求
                var pregexp = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/;
                //验证密码的合法性
                if(!pregexp.test($("#password").val())){
                    alert("密码至少8位，且必须包含字母和数字");
                    $("#password").focus()
                    return false;
                }
                //请再次输入密码
                if($("#password").val() == ""){
                    alert("请再输入一次密码");
                    $("#confirm_password").focus()
                    return false;
                }
                //判断两次密码是否相同
                if($("#password").val() !== $("#confirm_password").val()){
                    alert("两次密码不一致")
                    $("#confirm_password").focus();
                    return false
                }
                //手机号验证码
                var phone_exp = /^1[3-9]\d{9}$/;
                //请输入手机号码
                if($("#phone").val() == ""){
                    alert("请输入手机号码");
                    $("#phone").focus();
                    return false;
                }else if(!phone_exp.test($("#phone").val())){
                    alert("请输入正确的手机号码")
                    $("#phone").focus();
                    return false;
                }
                var phone_exp = /^([A-Za-z0-9_\.\-]+\@([A-Za-z0-9_\.\-])+\.([A-Za-z]{2,4}))$/;
                //请输入邮箱
                if(data.email == ""){
                    alert("请输入验证码");
                    $("#phone").focus();
                    return false;
                }else if(!phone_exp.test(data.email)){
                    alert("请输入正确的验证码");
                    $("#email").focus();
                    return false;
                }
                //提交信息
                $.post("controller/register.php",{data:data},function(res){
                    var e = JSON.parse(res);
                    if(e.code){
                        alert(e.msg);
                        location.href = "login.html";
                    }else{
                        alert(e.msg);
                        $("#username").focus();
                    }
                })
            })
        });
    </script>
</body>
</html>
